<template>
  <div>
    <!-- 搜索栏 -->
    <a-row>
      <a-col :span="12"  class='mb20' >
          <a-input  placeholder="请输入客户名称"  style='width: 200px'  v-model='search.keyWord'/>
          <a-button type="primary"  @click='pageInit()'>搜索</a-button>
      </a-col>
      <!-- 操作按钮 -->
      <a-col :span='4'  class='fr'>   
             <a-button type="primary" icon="plus-circle"  @click='addCustomer'>添加</a-button> 
        </a-col> 
    </a-row> 
  <!-- 表格--> 
    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
      <a-table :columns="columns" :dataSource="data"  :rowKey="record => record.code" :pagination="pagination"  @change="handleTableChange">
        <span slot="customTitle">用户名</span>
         
        <span slot="release"  slot-scope="text, record">{{text | formatDates}}</span>
        <span slot="createTime"  slot-scope="text, record">{{text | formatDate}}</span>

        <span slot="action" slot-scope="text, record">
          <span  class='color-blue  cursor'  @click='checkCustomer(record.code)'>详情</span>
          <a-divider type="vertical" /> 
          <span  class='color-blue  cursor'  @click='editCustomer(record.code)'>编辑</span>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
              <a href="javascript:;"  class='color-red'>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-spin>
    <customerModal  ref='customer'  :visible='modalShow'  v-on:handleCancel='modalShow=false'  v-on:handleOk='finishModal'></customerModal>
    <customerCheck  ref='customerCheck'  :visible='checkShow'  v-on:handleCancel='checkShow=false'  v-on:handleOk='checkShow=false'></customerCheck>
  </div>
</template>

<script>
import { listCustomer,delCustomer }  from  '@/api/system/index'
import  customerModal  from  '@/components/system/customerModal'
import  customerCheck  from  '@/components/system/customerCheck'
export default {
  name: 'customer',
  data () {
    return {
      spinning:false,
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      delayTime:1000,
      /*表格栏*/
      columns:[{
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' },
      },  {
        title: '登录名',
        dataIndex: 'loginName', 
      }, {
        title: '手机号',
        dataIndex: 'mobile',
      }, {
        title: 'email',
        dataIndex: 'email',
      }, {
        title: '角色',
        dataIndex: 'clientRoleName', 
      }, {
        title: '创建人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' },
      },  
      {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
    /*
      表格数据
    */
    search:{
      keyWord:'',
      pageNo:1,
      pageSize:10, 
    },
    data:[],  
    pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },   

    /*
      modal-show
    */
    modalShow:false,
    checkShow:false,
                                                                                               
    }
  },
  created(){
    this.pageInit()
  },
  methods:{
    pageInit(){ 
      this.spinning = true
       listCustomer(this.search).then((res)=>{ 
          this.data = res.data.dataList
          this.pagination.total = res.data.totalRs
        
          this.spinning = false
      }) 
    },
    /*
      表格数据操作
    */
    addCustomer(){
      this.$refs.customer.$emit('openDialog')
      this.modalShow = true
    },
    confirmDel(code){
      delCustomer(code).then((res)=>{
        if(res.data.flag == true){
          this.$message.success(res.data.msg)
          this.pageInit()
        }
      })
    },
    editCustomer(code){
        this.$refs.customer.$emit('editDialog',code)
        this.modalShow = true
    },
    checkCustomer(code){
        this.$refs.customerCheck.$emit('openDialog',code)
        this.checkShow = true
    },
    finishModal(){
        this.modalShow = false
        this.pageInit()
    }, 
    /*table页数变化*/
    handleTableChange (pagination, filters, sorter) { 
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    }, 
    
  },
  components:{
    customerModal,
    customerCheck
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> 
</style>
